<template>
	<div class="joinroom">
		<p class='tle'>请输入房间号</p>
		<input type="number" v-model="roomid" class='roomid' />
		<p class="tips">仅输入房间号的数字码</p>
		<span class='subm' @click='confirm'>确认</span>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				roomid:'',
				name:this.$store.state.name
			}
		},
		methods: {
			confirm(){
				if(!this.name || this.name.trim()==''){
					layer.alert('无效姓名');
					return;
				}
				var that=this;
				socket.emit('join', {
					name: that.name,
					roomID: 'room' + that.roomid,
					creat: false
				});
			}
		},
		mounted() {
			var that=this;
			socket.on('msg1', function(dt) {
//				console.log(dt);
				if(dt.flag){
//					console.log({path:'/main',params:{roomid:that.roomid}});
					that.$router.push({path:'/main',query:{roomid:that.roomid}});
				}else{
					layer.alert(dt.msg);
				}
			})
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
	@import '../assets/scss/reset';
	.joinroom {
		position: absolute;
		top: 40%;
		margin: 0 auto;
		width: 100%;
		text-align: center;
		p.tle {
			color: #a19db3;
			text-align: center;
			margin-bottom: 40px/$ppr;
			text-shadow: 1px 1px 3px #a19db3;
			font-size: 42px/$ppr;
		}
		p.tips {
			color: #fff;
			margin-top: 5px;
		}
		input {
			width: 80%;
			height: 100px/$ppr;
			line-height: 100px/$ppr;
			border: none;
			border-bottom: 1px solid #fff;
			background: transparent;
			font-size: 40px/$ppr;
			color: #fff;
			padding: 5px/$ppr 10px/$ppr;
			letter-spacing: 2px;
			text-align: center;
		}
		span.subm {
			display: block;
			margin: 40px/$ppr auto 0;
			width: 200px/$ppr;
			height: 80px/$ppr;
			background: #b2a5e8;
			border-radius: 20px/$ppr;
			text-align: center;
			line-height: 80px/$ppr;
			color: #fff;
			font-size: 32px/$ppr;
			border: 4px/$ppr solid rgba(148, 76, 247, 0.61);
			letter-spacing: 6px/$ppr;
		}
	}
</style>